<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <style type="text/css" media="screen">
    .btnhandel {
        position: absolute;
        top: 160px;
        left: 50px;
    }
    .helloworld {
        height: 100px;
        width: 100px;
        background: red;
    }
    /*从隐藏到显示*/

    .fade-enter {
        opacity: 0;
    }
    .fade-enter-to {
        opacity: 1;
    }
    .fade-enter-active {
        transition: opacity 3s;
    }
    /*从显示到隐藏*/

    .fade-leave {
        opacity: 1;
    }
    .fade-leave-to {
        opacity: 0;
    }
    .fade-leave-active {
        transition: opacity 2s;
    }
    /* .fade-enter-active {
        animation: bouse-in 3s ease;
    }
    .fade-leave-active {
        animation: bouse-in 3s reverse;
        ;
    }
    @keyframes bouse-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }*/
    </style>
</head>

<body>
    <!-- appear appear-active-class="animated bounceInRight"作用就是页面加载就有动画，初次动画
	 -->
    <div id="root">
        <transition name="fade" enter-active-class="animated bounceInRight fade-enter-active" leave-active-class="animated bounceOutRight fade-leave-active" appear appear-active-class="animated bounceInRight">
            <div v-show="show" class="helloworld">hello world</div>
        </transition>
        <button class="btnhandel" @click="handclick">切换</button>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el: "#root",
        data: {
            show: true,
        },
        methods: {
            handclick: function() {
                this.show = !this.show
            }

        }
    })
    </script>
</body>

</html>